<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18.模板引擎</title>
    <script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>
    <script type="text/javascript" src="../layui-v2.7.6/layui/jquery-1.10.1.js"></script>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<!--第一步：编写模版。你可以使用一个script标签存放模板，如：-->
<script id="demo" type="text/html">
    <h3>{{ d.title }}</h3>
    <ul>
        {{#  layui.each(d.list, function(index, item){ }}
        <li>
            <span>{{ item.modname }}</span>
            <span>{{ item.alias }}：</span>
            <span>{{ item.site || '' }}</span>
        </li>
        {{#  }); }}
        {{#  if(d.list.length === 0){ }}
        无数据
        {{#  } }}
    </ul>
</script>

<!--第二步：建立视图。用于呈现渲染结果。-->
<div id="view"></div>

<script>
// 使用末班引擎
    layui.use('laytpl', function(){
        var laytpl = layui.laytpl;
        //第三步：渲染模版
        var data = { //数据
            "title":"Layui常用模块"
            ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layuion.com"},{"modname":"表单","alias":"form"}]
            // ,"list":[]
        }
        var getTpl = demo.innerHTML
            ,view = document.getElementById('view');
        laytpl(getTpl).render(data, function(html){
            view.innerHTML = html;
        });
    });

</script>
</body>
</html>